
<template>
<div id="api">
 <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="true" label-width="68px">
      <el-form-item label="部门名称" prop="department">
        <el-select v-model="queryParams.department" placeholder="请输入部门名称" clearable>
          <el-option
              v-for="bumen in bumenList"
              :key="bumen.name"
              :label="bumen.name"
              :value="bumen.value"
          />
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

  <div id="main" style="width: 1200px;height:1000px;"></div>
</div>
</template>

<script>
import { listEmployees } from "@/api/order/employees";
import * as echarts from 'echarts';

export default {
  name: "Employees",
  data() {
    return {
      employeesList: [],
      loading: false, // 用于显示加载状态
      // 查询参数
      queryParams: {
        department:null
      },
      bumenList:[{
        name: "工程",
        value: "工程"
      },
      {
        name: "市场营销",
        value: "市场营销"
      },
      {
        name: "市场销售",
        value: "市场销售"
      },
      {
        name: "销售",
        value: "销售"
      },
      {
        name: "HR",
        value: "HR"
      },
      {
        name: "金融",
        value: "金融"
      }]
    };
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      this.loading = true;
      listEmployees(this.queryParams).then(response => {
        this.employeesList = response.rows;
        this.loading = false;
        this.renderChart();
      }).catch(error => {
        console.error('获取员工数据失败:', error);
        this.loading = false;
      });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    renderChart() {
      const departmentMap = {};
      const positionMap = {};

      // 处理员工数据，统计部门和职位的数量
      this.employeesList.forEach(employee => {
        const { department, position } = employee;
        // 统计部门人数
        if (!departmentMap[department]) {
          departmentMap[department] = {
            name: department,
            value: 0
          };
        }
        departmentMap[department].value++;

        // 统计每个部门下职位的人数
        const key = `${department}-${position}`;
        if (!positionMap[key]) {
          positionMap[key] = {
            name: `${department}-${position}`,
            value: 0
          };
        }
        positionMap[key].value++;
      });

      const departmentData = Object.values(departmentMap);
      const positionData = Object.values(positionMap);

      const option = {
        title: {
          text: '员工信息表',
          left: 'center',
          top: 10,
          textStyle: {
            fontSize: 28,
            fontWeight: 'bold'
          }
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c}人 ({d}%)'
        },
        legend: {
          data: [...Object.keys(departmentMap), ...Object.keys(positionMap).map(key => positionMap[key].name)],
          top: 40,
},
        series: [
          {
            name: '部门',
            type: 'pie',
            selectedMode: 'single',
            radius: [0, '30%'],
            label: {
              position: 'inner',
              fontSize: 14
            },
            labelLine: {
              show: false
            },
            data: departmentData
          },
          {
            name: '职位',
            type: 'pie',
            radius: ['45%', '60%'],
            labelLine: {
              length: 30
            },
            label: {
              formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c} 人 {per|{d}%}  ',
              backgroundColor: '#F6F8FC',
              borderColor: '#8C8D8E',
              borderWidth: 1,
              borderRadius: 4,
              rich: {
                a: {
                  color: '#6E7079',
                  lineHeight: 22,
                  align: 'center'
                },
                hr: {
                  borderColor: '#8C8D8E',
                  width: '100%',
                  borderWidth: 1,
                  height: 0
                },
                b: {
                  color: '#4C5058',
                  fontSize: 14,
                  fontWeight: 'bold',
                  lineHeight: 33
                },
                per: {
                  color: '#fff',
                  backgroundColor: '#4C5058',
                  padding: [3, 4],
                  borderRadius: 4
                }
              }
            },
            data: positionData
          }
        ]
      };

      const myChart = echarts.init(document.getElementById('main'));
      myChart.setOption(option);
    }
  },
  mounted() {
    // 这里可以不做处理，数据获取和图表渲染在 created 和方法中完成
  }
};
</script>
